<template>
  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested"
                class="title-icon" />项目管理
    </h3>

    <el-card>
      <div slot="header">
        <span>项目详情</span>
      </div>
      <div>
        <span style="display: inline-block;margin-bottom:10px;"
              v-if="detail">项目名称：{{detail.project.name}}</span>
      </div>
      <el-row :gutter="40"
              class="panel-group">
        <el-col :xs="12"
                :sm="12"
                :lg="6"
                class="card-panel-col">
          <div class="card-panel"
               @click="handleSetLineChartData('newVisitis')">
            <div class="card-panel-icon-wrapper icon-money">
              <img src="../../../assets/5.png"
                   alt />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">应收款总额</div>
              <count-to :start-val="0"
                        :end-val="detail.firstMoney"
                        :duration="2600"
                        class="card-panel-num" />元
            </div>
          </div>
        </el-col>
        <el-col :xs="12"
                :sm="12"
                :lg="6"
                class="card-panel-col">
          <div class="card-panel"
               @click="handleSetLineChartData('messages')">
            <div class="card-panel-icon-wrapper icon-money">
              <img src="../../../assets/5.png"
                   alt />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">实收款总额</div>
              <count-to :start-val="0"
                        :end-val="detail.secondMoney"
                        :duration="3000"
                        class="card-panel-num" />元
            </div>
          </div>
        </el-col>
        <el-col :xs="12"
                :sm="12"
                :lg="6"
                class="card-panel-col">
          <div class="card-panel"
               @click="handleSetLineChartData('purchases')">
            <div class="card-panel-icon-wrapper icon-money">
              <img src="../../../assets/5.png"
                   alt />
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">今日收款金额</div>
              <count-to :start-val="0"
                        :end-val="detail.thirdMoney"
                        :duration="3200"
                        class="card-panel-num" />元
            </div>
          </div>
        </el-col>
      </el-row>
      <el-button type="primary"
                 style="margin-bottom:20px;"
                 @click="addD">新增机器设备</el-button>
      <div style="border-top:1px solid #e6ebf5;margin-bottom:10px;">
        <el-table :data="tableData"
                  height="calc(100vh - 500px)"
                  border
                  stripe
                  style="width: 100%;margin-bottom:10px;">
          <el-table-column prop="id"
                           label="序号"></el-table-column>
          <el-table-column prop="no"
                           label="机器编码"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">{{scope.row.deviceStatus==0?'正常':"异常"}}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text"
                         @click="unbind(scope.row.projectId,scope.row.id)">解绑</el-button>

              <el-button type="text"
                         @click="handleDetail(scope.row.id)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <h3 class="titles">
        收款配置
        <el-button type="primary"
                   @click="goEdit">编辑</el-button>
      </h3>
      <div class="item">
        <span>支付方式：</span>
        <el-table :data="zhi"
                  border
                  stripe
                  class="right">
          <el-table-column prop="id"
                           label="序号"></el-table-column>
          <el-table-column prop="type"
                           label="款项类型"></el-table-column>
          <el-table-column prop="name"
                           label="款项名称"></el-table-column>
          <el-table-column prop="payType"
                           label="支付方式"></el-table-column>
        </el-table>
      </div>
      <div class="item">
        <span>配置维度：</span>
        <div class="right">
          <el-radio v-model="wei"
                    label="1">项目</el-radio>
          <el-radio v-model="wei"
                    label="2">楼栋</el-radio>
        </div>
      </div>
      <div class="item">
        <span>项目名称：</span>
        <div class="right">
          <el-select v-model="detail.project.name"
                     placeholder="请选择"></el-select>
        </div>
      </div>
      <div class="item">
        <span>楼栋：</span>
        <div class="right">
          <el-button :type="cur==index?'primary':'default'"
                     v-for="(item,index) in dongs"
                     :key="index"
                     @click="getBankLoudong(item,index)">{{item.loudong}}栋</el-button>
        </div>
      </div>
      <div class="item">
        <span>入款账号：</span>
        <div class="right">
          <el-table :data="zhangS"
                    border
                    style="width: 100%">
            <el-table-column prop="id"
                             label="序号"
                             width="180"></el-table-column>
            <el-table-column prop="projectName"
                             label="款项类型"></el-table-column>
            <el-table-column label="款项名称"
                             width="180"
                             align="left">
              <template slot-scope="scope">
                <div v-if="scope.row.status==1">定金</div>
                <div v-if="scope.row.status==2">首期</div>
                <div v-if="scope.row.status==3">印花税</div>
                <div v-if="scope.row.status==4">不动产权办理</div>
                <div v-if="scope.row.status==5">预约金</div>
              </template>
            </el-table-column>
            <el-table-column label="入账账号">
              <template slot-scope="scope">{{scope.row.accountName}}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <h3 class="titles">
        收据模板
        <el-button type="primary"
                   @click="goM">编辑</el-button>
      </h3>

      <div class="wrapper">
        <h3>
          {{mu}}
          <span class="num">000560</span>
        </h3>
        <p>
          <span class="title">收款收据</span>
          <span class="date">2019年10月24日</span>
        </p>

        <div class="list">
          <div class="list-item">
            <div class="username">客户姓名</div>
            <div class="user-input"></div>
            <div class="room">房号</div>
            <div class="user-room"></div>
            <div class="user-num">认购书编号</div>
            <div class="user-nums"></div>
          </div>
          <div class="list-item">
            <div class="item1">收款项目</div>
            <div class="item2">付款方式</div>
            <div class="item3">金额</div>
          </div>
          <div class="list-item h100">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
          </div>
          <div class="list-item">
            <div class="item-name">合计人名币（大写）</div>
            <div class="user-input"></div>
            <div class="total">合计（小写）</div>
            <div class="total-input"></div>
          </div>
          <div class="list-item">备注</div>
        </div>
        <p class="last">
          <span>单位盖章：</span>
          <span class="date">收款机器编号：00005</span>
        </p>
        <div class="mask"
             v-if="addMask"
             @click.self="addMask=!addMask">
          <div class="content">
            <h3>关联设备</h3>
            <el-form>
              <el-form-item label="项目名称">{{detail.project.name}}</el-form-item>
              <el-form-item label="设备">
                <el-select v-model="deviceId"
                           placeholder="请选择">
                  <el-option label="请选择"
                             value></el-option>
                  <el-option :label="item.no"
                             :value="item.id"
                             v-for="(item, index) in options"
                             :key="index"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary"
                           @click.stop="bind">确定</el-button>
                <el-button type="default"
                           @click="addMask=!addMask">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import CountTo from "vue-count-to";
import {
  getDetail,
  unBind,
  getDong,
  getZhang,
  projectIdEdit,
  editDetail,
  getBank,
  adddevicelist,
  setBind
} from "@/api/project";
export default {
  name: "detailManage",
  components: {
    CountTo
  },
  data () {
    return {
      page: 1,
      pageSize: 10,
      totalPage: 1,
      mu: "",
      formInline: {
        code: "15001",
        project: "奥园誉湖湾"
      },
      zhi: [
        { id: 1, name: "定金", payType: "银联支付", type: "非贷款类房款" },
        { id: 2, name: "首期", payType: "银联支付", type: "非贷款类房款" },
        { id: 3, name: "印花税", payType: "银联支付", type: "待收费用" }
      ],
      detail: "",
      tableData: [],
      zhangS: [
        { id: 1, status: 1, projectName: "非贷款类房款", accountName: "", projectId: "" },
        { id: 2, status: 2, projectName: "非贷款类房款", accountName: "", projectId: "" },
        { id: 3, status: 3, projectName: "代收费用", accountName: "", projectId: "" },
        { id: 4, status: 4, projectName: "代收费用", accountName: "", projectId: "" },
        { id: 5, status: 5, projectName: "代收费用", accountName: "", projectId: "" }
      ],
      id: "",
      dongs: [],
      wei: "1",
      addMask: false,
      deviceId: "",
      options: [],
      cur: -1
    };
  },
  mounted () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      this.editDetail(this.id);
    }
    this.getDongs(this.id);
    this.getMu(this.id);
  },
  methods: {
    getBankLoudong (item, index) {
      if (this.cur != index) {
        this.cur = index;
        this.getBanks(item.id);
      }
    },
    bind () {
      if (this.deviceId == "") {
        return this.$message({
          message: "请选择设备",
          type: "warning"
        });
      }
      setBind(this.id, this.deviceId).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "绑定成功",
            type: "success"
          });
          setTimeout(() => {
            this.addMask = !this.addMask;
            this.editDetail(this.id);
          }, 1500);
        } else {
          return this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    },
    getBanks (id) {
      getBank(this.id, id).then(res => {
        var arr = res.data;
        var arr = res.data;
        if (res.data.length == 0) {
          this.zhangS = [
            { id: 1, status: 1, projectName: "非贷款类房款", accountName: "", projectId: "" },
            { id: 2, status: 2, projectName: "非贷款类房款", accountName: "", projectId: "" },
            { id: 3, status: 3, projectName: "代收费用", accountName: "", projectId: "" },
            { id: 4, status: 4, projectName: "代收费用", accountName: "", projectId: "" },
            { id: 5, status: 5, projectName: "代收费用", accountName: "", projectId: "" }
          ];
        } else {
          var l = res.data.length;
          for (var i = 0; i < l; i++) {
            this.zhangS[arr[i].status - 1].accountName = arr[i].accountName;
            this.zhangS[arr[i].status - 1].projectId = arr[i].projectId;
          }
        }
      });
    },
    goM () {
      this.$router.push({
        path: "/project/editM",
        query: {
          m: this.mu,
          id: this.id
        }
      });
    },
    getMu (id) {
      projectIdEdit(id).then(res => {
        this.mu = res.data;
      });
    },
    getDongs (id) {
      getDong(id).then(res => {
        this.dongs = res.data;
        if (res.data.length > 0) {
          this.cur = 0;
          this.getBanks(res.data[0].id);
        }
      });
    },
    add () {
      this.$router.push({ path: "/manage/edit" });
    },
    goEdit () {
      this.$router.push({
        path: "/project/collection",
        query: { id: this.id, name: this.detail.project.name }
      });
    },
    unbind (id, deviceId) {
      this.$confirm("您确定要解绑吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          unBind(id, deviceId).then(res => {
            if (res.code == 200) {
              this.$message({
                message: "解绑成功",
                type: "success"
              });
              this.editDetail(this.id);
            } else {
              this.$message({
                message: res.message,
                type: "warning"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消解绑"
          });
        });
    },
    editDetail (id) {
      editDetail(id).then(res => {
        this.tableData = res.data.deviclist;
        this.detail = res.data;
      });
    },
    handleDetail (id) {
      this.$router.push({ path: "/project/mDetail", query: { id: id } });
    },
    addD () {
      this.addMask = true;
      this.deviceId = "";
      this.getDevide();
    },
    getDevide () {
      adddevicelist().then(res => {
        this.options = res.data;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.55);
  .content {
    width: 600px;
    height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 10px;
    padding: 30px 60px;
    h3 {
      font-size: 20px;
      color: #000;
    }
  }
}
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    padding: 18px 0;
    margin: 0 20px;
  }
}
.title-small {
  font-size: 14px;
}

.money {
  color: #409eff;
}
.panel-group {
  margin: 0 0 20px 0 !important;
  h3 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  /deep/ .el-card__header {
    border: 0 none;
  }
  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
.titles {
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}
.item {
  display: flex;
  margin: 20px auto;
  span {
    display: block;
    width: 120px;
    text-align: right;
    margin-right: 30px;
  }
  .right {
    flex: 1;
  }
}
.wrapper {
  width: 1200px;
  margin: 10px auto;
  background: #eee;
  padding: 20px 70px;
  h3 {
    text-align: center;
    font-size: 24px;
    overflow: hidden;
    .num {
      color: red;
      font-size: 18px;
      float: right;
      font-weight: 400;
    }
  }
  p {
    text-align: center;
    overflow: hidden;
    .title {
      letter-spacing: 4px;
      font-size: 16px;
    }
    .date {
      float: right;
      font-size: 16px;
    }
  }
  .list {
    margin: 10px 0;
    border: 1px solid #000;
    border-bottom: 0;
    position: relative;
    &:after {
      content: "";
      width: 128px;
      height: 128px;
      background: url(../../../assets/zhang.png) no-repeat;
      background-size: cover;
      position: absolute;
      bottom: 60px;
      left: 100px;
    }
    .list-item {
      display: flex;
      height: 60px;
      line-height: 60px;
      padding: 0 10px;
      border-bottom: 1px solid #000;
      .username {
        width: 100px;
        padding: 0 10px;
        border-right: 1px solid #000;
      }
      .user-input {
        flex: 1;
        border-right: 1px solid #000;
      }
      .room {
        width: 60px;
        text-align: center;
        border-right: 1px solid #000;
      }
      .user-room {
        padding: 0 15px;
        width: 246px;
        border-right: 1px solid #000;
      }
      .user-num {
        padding: 0 10px;
        width: 140px;
        border-right: 1px solid #000;
      }
      .user-nums {
        width: 24%;
      }
      .item1 {
        padding: 0 10px;
        width: 33%;
        text-align: center;
        border-right: 1px solid #000;
      }
      .item2 {
        padding: 0 10px;
        width: 28%;
        text-align: center;
        border-right: 1px solid #000;
      }
      .item3 {
        flex: 1;
        padding-left: 100px;
      }
      .item-name {
        border-right: 1px solid #000;
      }
      .total {
        width: 120px;
        border-right: 1px solid #000;
      }
      .total-input {
        width: 200px;
      }
    }
    .h100 {
      height: 260px;
    }
  }
  .last {
    text-align: left;
    span {
      display: inline-block;
      margin-left: 80px;
      margin-right: 60px;
    }
  }
}
</style>
